<template>
  <el-container class="main-layout">
    <el-aside :width="isCollapse ? '64px' : '240px'" class="main-aside">
      <div class="logo-container">
        <img src="https://element-plus.org/images/element-plus-logo.svg" alt="Logo" class="logo-img" />
        <span v-show="!isCollapse" class="logo-text">管理系统</span>
      </div>
      <el-scrollbar>
        <el-menu
          :collapse="isCollapse"
          :default-active="activeMenu"
          class="el-menu-vertical"
          :background-color="appStore.currentTheme === 'dark' ? '#1e1e2d' : '#fff'"
          :text-color="appStore.currentTheme === 'dark' ? '#a2a3b7' : '#303133'"
          :active-text-color="appStore.currentTheme === 'dark' ? '#fff' : '#409eff'"
          router
        >
          <el-menu-item index="/dashboard">
            <el-icon><Odometer /></el-icon>
            <span>仪表盘</span>
          </el-menu-item>
          <el-menu-item index="/users">
            <el-icon><User /></el-icon>
            <span>用户管理</span>
          </el-menu-item>
          <el-menu-item index="/visualization">
            <el-icon><DataLine /></el-icon>
            <span>大屏可视化</span>
          </el-menu-item>
        </el-menu>
      </el-scrollbar>
    </el-aside>
    
    <el-container>
      <el-header class="main-header">
        <div class="header-left">
          <el-icon 
            class="trigger-icon" 
            @click="toggleCollapse"
          >
            <component :is="isCollapse ? 'Expand' : 'Fold'" />
          </el-icon>
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>{{ currentRoute }}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        
        <div class="header-right">
          <div class="header-actions">
            <div class="action-item">
              <el-tooltip content="主题设置" placement="bottom">
                <el-dropdown 
                  @command="handleThemeChange" 
                  trigger="click"
                  :teleported="true"
                >
                  <el-button class="action-button" text>
                    <el-icon><Brush /></el-icon>
                  </el-button>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item command="default">
                        <el-icon><Monitor /></el-icon>默认主题
                      </el-dropdown-item>
                      <el-dropdown-item command="dark">
                        <el-icon><Moon /></el-icon>暗黑主题
                      </el-dropdown-item>
                      <el-dropdown-item command="blue">
                        <el-icon><Star /></el-icon>蓝色主题
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </el-tooltip>
            </div>

            <div class="action-item">
              <el-tooltip content="语言设置" placement="bottom">
                <el-dropdown 
                  @command="handleLangChange" 
                  trigger="click"
                  :teleported="true"
                >
                  <el-button class="action-button" text>
                    <el-icon><ChatRound /></el-icon>
                  </el-button>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item command="zh-CN">简体中文</el-dropdown-item>
                      <el-dropdown-item command="en-US">English</el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </el-tooltip>
            </div>

            <el-divider direction="vertical" />

            <el-dropdown @command="handleCommand" trigger="click" :teleported="true">
              <div class="user-info">
                <el-avatar :size="32" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
                <span class="username">管理员</span>
              </div>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="profile">
                    <el-icon><User /></el-icon>个人信息
                  </el-dropdown-item>
                  <el-dropdown-item command="settings">
                    <el-icon><Setting /></el-icon>系统设置
                  </el-dropdown-item>
                  <el-dropdown-item divided command="logout">
                    <el-icon><SwitchButton /></el-icon>退出登录
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
      </el-header>
      
      <el-main class="main-content">
        <router-view v-slot="{ Component }">
          <transition name="fade" mode="out-in">
            <component :is="Component" />
          </transition>
        </router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import { ref, computed, nextTick } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import { useAppStore } from '@/stores/app'
import { useI18n } from 'vue-i18n'
import {
  Odometer,
  User,
  Setting,
  SwitchButton,
  Expand,
  Fold,
  Monitor,
  Moon,
  Star,
  ChatRound,
  Brush,
  DataLine
} from '@element-plus/icons-vue'

const router = useRouter()
const route = useRoute()
const isCollapse = ref(false)
const appStore = useAppStore()
const { t } = useI18n()

const currentRoute = computed(() => {
  const routeMap = {
    '/dashboard': '仪表盘',
    '/users': '用户管理',
    '/visualization': '大屏可视化'
  }
  return routeMap[route.path] || '未知页面'
})

const activeMenu = computed(() => route.path)

const toggleCollapse = () => {
  isCollapse.value = !isCollapse.value
}

const handleCommand = (command) => {
  switch (command) {
    case 'logout':
      localStorage.removeItem('token')
      ElMessage.success('退出成功')
      router.push('/login')
      break
    case 'profile':
      ElMessage.info('个人信息')
      break
    case 'settings':
      ElMessage.info('系统设置')
      break
  }
}

const handleThemeChange = (theme) => {
  appStore.setTheme(theme)
  ElMessage({
    message: `已切换到${theme === 'dark' ? '暗黑' : theme === 'blue' ? '蓝色' : '默认'}主题`,
    type: 'success'
  })
}

const handleLangChange = (lang) => {
  appStore.setLang(lang)
  ElMessage.success('语言切换成功')
}

const handleDropdownShow = () => {
  nextTick(() => {
    const firstItem = document.querySelector('.el-dropdown-menu__item')
    if (firstItem) {
      firstItem.focus()
    }
  })
}
</script>

<style lang="scss" scoped>
.main-layout {
  min-height: 100vh;
}

.main-aside {
  background-color: var(--menu-background);
  transition: width 0.3s;
  overflow: hidden;
}

.logo-container {
  height: 60px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  color: white;
  background: var(--menu-background);
}

.logo-img {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  margin-right: 12px;
}

.logo-text {
  font-size: 18px;
  font-weight: 600;
  white-space: nowrap;
}

.main-header {
  background: var(--header-background);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  height: 60px;
  box-shadow: 0 1px 4px rgba(0,21,41,.08);
}

.header-left {
  display: flex;
  align-items: center;
  gap: 20px;
}

.trigger-icon {
  font-size: 20px;
  cursor: pointer;
  color: var(--text-color-secondary);
}

.trigger-icon:hover {
  color: var(--primary-color);
}

.user-dropdown {
  cursor: pointer;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 4px;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.user-info:hover {
  background-color: rgba(0, 0, 0, 0.04);
}

.username {
  font-size: 14px;
  color: var(--text-color);
}

.main-content {
  background: var(--background-color);
  padding: 20px;
}

.menu-item {
  margin: 4px 0;
  border-radius: 4px;
}

:deep(.el-menu) {
  border-right: none;
}

:deep(.el-menu-item.is-active) {
  background: var(--primary-color) !important;
  color: white !important;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.action-item {
  display: flex;
  align-items: center;
}

.action-button {
  font-size: 20px;
  color: var(--text-color-secondary);
  transition: color 0.3s;
  padding: 0 8px;
  height: 32px;
}

.action-button:hover {
  color: var(--primary-color);
}

.el-divider--vertical {
  height: 20px;
  margin: 0 12px;
}

// 隐藏原始单选框
:deep(.el-radio__original) {
  display: none !important;
}

// 移除单选框焦点样式
:deep(.el-radio:focus:not(.is-focus):not(:active):not(.is-disabled) .el-radio__inner) {
  box-shadow: none !important;
}
</style> 